<template>
  <div class="login">
    <div class="close">
      <span class="iconfont iconicon-test"></span>
    </div>
    <div class="logo">
      <span class="iconfont iconnew"></span>
    </div>
    <auth-input
      type="text"
      placeholder="用户名/手机号码"
      @valChange="setUsername"
      err_msg="请输入正确的手机号码或用户名"
      :rule="/^(\w{5,8}|\d{5,11})$/"
    />
    <auth-input
      @valChange="setPassword"
      type="password"
      placeholder="密码"
      err_msg="密码长度为6-10"
      :rule="/^\w{3,10}$/"
    />
    <auth-button btnText="登录" @submit="login" class="btn" />
  </div>
</template>

<script>
import AuthInput from "../components/AuthInput";
import AuthButton from "../components/AuthButton";
export default {
  name: "Register",
  components: {
    AuthInput,
    AuthButton,
  },
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    login() {
      if (!this.username || !this.password) {
        this.$toast.fail("请输入完整信息");
        return;
      }
      this.$axios
        .post("/login", {
          username: this.username,
          password: this.password,
        })
        .then((res) => {
          const { message } = res.data;
          if (message === "登录成功") {
            // console.log(res.data);
            this.$toast.success("登录成功");
            window.localStorage.setItem("token", res.data.data.token);
            window.localStorage.setItem("userId", res.data.data.user.id);
            setTimeout(() => {
              this.$router.push("/personal");
            }, 800);
          }
        })
        .catch((err) => {
          console.dir(err);
          this.$toast.fail("系统错误");
        });
    },
    setUsername(val) {
      this.username = val;
    },
    setPassword(val) {
      this.password = val;
    },
  },
};
</script>

<style scoped lang="less">
.login {
  padding: 24/360 * 100vw;
  .iconicon-test {
    font-size: 26/360 * 100vw;
  }
  .logo {
    text-align: center;
    .iconnew {
      font-size: 126/360 * 100vw;
      color: #d81e06;
    }
  }
  .btn {
    margin-top: 30/360 * 100vw;
  }
}
</style>
